<template>
  <el-descriptions :column="1" border label-style="attr-desc-label">
    <el-descriptions-item label="景区名称">{{ attraction.name }}</el-descriptions-item>
    <el-descriptions-item label="景区类别">{{ getTypeName(attraction.attrCateId, attrTypes) }}</el-descriptions-item>
    <el-descriptions-item label="门票价格">{{ attraction.price }}</el-descriptions-item>\
    <el-descriptions-item label="限制人数">{{ attraction.limitPerson }}</el-descriptions-item>
    <el-descriptions-item label="地区">{{ getAreaName(attraction.areaId, areas) }}</el-descriptions-item>
    <el-descriptions-item label="开放时间">{{ attraction.openTime }}</el-descriptions-item>
    <el-descriptions-item label="详细地址" label-class-name="attr-desc-label">{{ attraction.address }}</el-descriptions-item>
    <el-descriptions-item label="购票须知">{{ attraction.ticketNotice }}</el-descriptions-item>
    <el-descriptions-item label="景区简介">{{ attraction.attrDesc }}</el-descriptions-item>
  </el-descriptions>
</template>

<script>
import { mapGetters } from 'vuex'
import { getAttrById } from '@/api/travel'
import { getAreaName, getTypeName } from '@/utils/attractionUtil'

export default {
  name: 'AttractionDialog',
  data() {
    return {
      form: {},
      getAreaName,
      getTypeName
    }
  },
  computed: {
    ...mapGetters([
      'attrTypes',
      'areas',
      'attrId',
      'attraction'
    ])
  },
  watch: {
    attrId: function(newVal, oldVal) {
      this.getAttrInfo()
    }
  },
  created() {
    // this.getAttrInfo()
  },
  methods: {
    async getAttrInfo() {
      const res = await getAttrById(this.attrId)
      if (res.code === 200) {
        const { attraction } = res.data
        this.form = attraction
        this.$store.commit('attraction/SET_ATTRACTION', attraction)
        console.log(attraction)
      } else {
        this.$message('景区不存在')
      }
    }
  }
}
</script>

<style lang="scss" >
    .attr-desc-label {
         width: 100PX;
    }
</style>
